<template>
  <div class="customer-management">
    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-box">
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索客户姓名、身份证号或联系电话..."
          class="search-input"
        />
        <button @click="searchCustomers" class="search-btn">🔍</button>
      </div>
      <div class="filter-options">
        <!-- 功能按钮 -->
        <div class="filter-options">
          <button @click="openAddCustomerModal" class="btn-primary">添加客户</button>
          <button @click="exportToCSV" class="btn-secondary">导出CSV</button>
        </div>
      </div>
    </div>





    <!-- 客户列表 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>客户编号</th>
            <th>客户姓名</th>
            <th>身份证号</th>
            <th>联系电话</th>
            <th>联系地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="customer in filteredCustomers" :key="customer.customerID">
            <td>{{ customer.customerID }}</td>
            <td>{{ customer.customerName }}</td>
            <td>{{ customer.pid }}</td>
            <td>{{ customer.telephone }}</td>
            <td>{{ customer.address }}</td>
            <td>
              <div class="action-buttons">
                <button @click="editCustomer(customer)" class="btn-icon-btn" title="编辑">
                  ✏️
                </button>
                <button @click="deleteCustomer(customer.customerID)" class="btn-icon-btn delete" title="删除">
                  🗑️
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-if="isEditing" class="modal-overlay">
      <div class="edit-modal">
        <h3>编辑客户信息</h3>
        <form @submit.prevent="updateCustomer">
          <div class="form-group">
            <label>客户姓名</label>
            <input v-model="editingCustomer.customerName" type="text" required :disabled="true" />
          </div>
          <div class="form-group">
            <label>身份证号</label>
            <input v-model="editingCustomer.pid" type="text" required :disabled="true" />
          </div>
          <div class="form-group">
            <label>联系电话</label>
            <input v-model="editingCustomer.telephone" type="text" required />
          </div>
          <div class="form-group">
            <label>用户密码</label>
            <input v-model="editingCustomer.pass" type="text" required />
          </div>
          <div class="form-group">
            <label>联系地址</label>
            <input v-model="editingCustomer.address" type="text" required />
          </div>

          <div class="form-actions">
            <button type="submit" class="btn-primary">保存</button>
            <button type="button" class="btn-secondary" @click="cancelEdit">取消</button>
          </div>
        </form>
      </div>
    </div>


    <!-- 删除确认弹窗 -->
    <div v-if="isDeleting" class="modal-overlay">
      <div class="delete-modal">
        <h3>确认删除</h3>
        <p>您确定要删除该客户信息吗？此操作不可撤销。</p>
        <div class="form-actions">
          <button @click="confirmDelete" class="btn-danger">确认删除</button>
          <button @click="cancelDelete" class="btn-secondary">取消</button>
        </div>
      </div>
    </div>

    <!-- 添加客户表单模态框 -->
    <div v-if="isAdding" class="modal-overlay">
      <div class="add-modal">
        <h3>添加客户信息</h3>
        <form @submit.prevent="addCustomer">
          <div class="form-group">
            <label>客户姓名</label>
            <input v-model="newCustomer.customerName" type="text" required />
          </div>
          <div class="form-group">
            <label>身份证号</label>
            <input v-model="newCustomer.PID" type="text" required />
          </div>
          <div class="form-group">
            <label>联系电话</label>
            <input v-model="newCustomer.phone" type="text" required />
          </div>
          <div class="form-group">
            <label>登录密码</label>
            <input v-model="newCustomer.pass" type="text" required />
          </div>
          <div class="form-actions">
            <button type="submit" class="btn-primary">添加</button>
            <button type="button" class="btn-secondary" @click="cancelAdd">取消</button>
          </div>
        </form>
      </div>
    </div>


  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        adminID: 10011001,
        adminName: "admin",
        adminPass: "10011001",
        address: "",
        customerID: 0,
        pass: "",
        telephone: ""
      },
      customers: [], // 存储从接口获取的客户数据
      searchQuery: '', // 搜索框内容
      statusFilter: '', // 状态筛选条件
      isEditing: false, // 控制编辑模态框的显示状态
      editingCustomer: null, // 当前正在编辑的客户信息
      isDeleting: false, // 控制删除弹窗的显示状态
      customerIdToDelete: null, // 当前需要删除的客户ID
      isAdding: false, // 控制添加客户弹窗的显示状态
      newCustomer: {
        customerName: '',
        PID: '',
        adminID: 10011001,
        adminName: 'admin',
        adminPass: '10011001',
        phone: '',
        pass: '',
      }

    };
  },
  computed: {

    filteredCustomers() {
      // 根据搜索框内容和状态筛选条件过滤客户数据
      console.log(this.customers)
      return this.customers.filter(customer => {
        const matchesSearch =
          customer.customerName.includes(this.searchQuery) || // 姓名匹配
          customer.pid.includes(this.searchQuery) || // 身份证号匹配
          customer.telephone.includes(this.searchQuery); // 联系电话匹配
        const matchesStatus = this.statusFilter ? customer.status === this.statusFilter : true; // 状态匹配
        return matchesSearch && matchesStatus;
      });
    }
  },
  methods: {
    // 打开添加客户弹窗
    openAddCustomerModal() {
      this.isAdding = true;
    },

    // 取消添加客户
    cancelAdd() {
      this.isAdding = false;
      this.newCustomer = {
        customerName: '',
        pid: '',
        telephone: '',
        address: ''
      };
    },

    // 添加客户
    async addCustomer() {
      try {
        const response = await axios.post('http://localhost:8057/user/create', this.newCustomer);
        console.log(response)
        if (response.data.code === 200) {
          // 添加成功后刷新客户列表
          alert(response.data.msg)
          this.fetchCustomers();
          this.cancelAdd(); // 关闭添加弹窗
        } else {
          alert(response.data.msg);
          console.error('添加失败:', response.data.msg);
        }
      } catch (error) {
        console.error('接口请求失败:', error);
      }
    },

    // 导出CSV
    exportToCSV() {
      const csvRows = [];
      // 表头
      const headers = ['客户编号', '客户姓名', '身份证号', '联系电话', '联系地址'];
      csvRows.push(headers.join(','));

      // 数据行
      this.filteredCustomers.forEach((customer) => {
        const row = [
          customer.customerID,
          customer.customerName,
          customer.pid,
          customer.telephone,
          customer.address
        ];
        csvRows.push(row.join(','));
      });

      // 合并所有行
      const csvString = csvRows.join('\n');

      // 创建下载链接
      const blob = new Blob([csvString], { type: 'text/csv' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.setAttribute('href', url);
      a.setAttribute('download', '客户信息.csv');
      a.click();
      window.URL.revokeObjectURL(url);
    },

    // 打开删除确认弹窗
    deleteCustomer(customerID) {
      this.customerIdToDelete = customerID; // 记录需要删除的客户ID
      this.isDeleting = true; // 显示删除弹窗
    },

    // 取消删除
    cancelDelete() {
      this.isDeleting = false; // 隐藏删除弹窗
      this.customerIdToDelete = null; // 清空删除数据
    },

    // 确认删除
    async confirmDelete() {
      try {
        this.formData.customerID = this.customerIdToDelete
        const response = await axios.post('http://localhost:8057/user/delete', this.formData);
        if (response.data.code === 200) {
          // 删除成功后刷新客户列表
          this.fetchCustomers();
          this.cancelDelete(); // 关闭删除弹窗
        } else {
          console.error('删除失败:', response.data.msg);
        }
      } catch (error) {
        console.error('接口请求失败:', error);
      }
    },

    async fetchCustomers() {
      console.log(this.formData)
      try {
        const response = await axios.post('http://localhost:8057/user/selectAll', this.formData);
        if (response.data.code === 200) {
          console.log(response)
          this.customers = response.data.data; // 将返回的数据赋值给 customers
        } else {
          console.error('数据获取失败:', response.data.msg);
        }
      } catch (error) {
        console.error('接口请求失败:', error);
      }
    },
    searchCustomers() {
      // 触发计算属性重新计算
      this.$forceUpdate();
    },
    editCustomer(customer) {
      this.editingCustomer = { ...customer }; // 使用浅拷贝避免直接修改原始数据
      this.isEditing = true; // 显示编辑模态框
    },

    // 取消编辑
    cancelEdit() {
      this.isEditing = false; // 隐藏编辑模态框
      this.editingCustomer = null; // 清空编辑数据
    },

    // 提交更新
    async updateCustomer() {
      this.formData.customerID = this.editingCustomer.customerID
      this.formData.pass = this.editingCustomer.pass
      this.formData.telephone = this.editingCustomer.telephone
      this.formData.address = this.editingCustomer.address
      try {
        console.log(this.formData)
        const response = await axios.post('http://localhost:8057/user/update', this.formData);
        console.log(response)
        if (response.data.code === 200) {
          // 更新成功后刷新客户列表
          this.fetchCustomers();
          alert(response.data.msg);
          this.cancelEdit(); // 关闭编辑模态框
        } else {
          alert(response.data.msg);
          console.error('更新失败:', response.data.msg);
        }
      } catch (error) {
        console.error('接口请求失败:', error);
      }
    }

  },
  created() {
    this.fetchCustomers(); // 组件加载时自动获取数据
  }
};
</script>


<style scoped>
.customer-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: #2563eb;
  color: white;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-secondary {
  background: #6b7280;
  color: white;
}

.btn-secondary:hover {
  background: #4b5563;
}

.btn-icon {
  font-size: 16px;
}

.search-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}

.search-box {
  display: flex;
  flex: 1;
  max-width: 400px;
}

.search-input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px 0 0 6px;
  font-size: 14px;
}

.search-btn {
  padding: 10px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
}

.filter-select {
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.data-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.data-table td {
  font-size: 14px;
  color: #1f2937;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-icon-btn {
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-icon-btn:hover {
  background: #f3f4f6;
}

.btn-icon-btn.delete:hover {
  background: #fef2f2;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}


.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #2563eb;
}

.customer-info p {
  margin: 4px 0;
  font-size: 14px;
  color: #374151;
}



/* 响应式设计优化 */
@media (max-width: 1024px) {
  .customer-management {
    padding: 16px;
  }

  .page-header h2 {
    font-size: 22px;
  }

  .search-section {
    gap: 12px;
  }

  .search-box {
    max-width: 350px;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }

  .form-row {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .customer-management {
    padding: 12px;
  }



  .page-header h2 {
    font-size: 20px;
    text-align: center;
  }



  .search-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .search-box {
    max-width: none;
  }

  .search-input {
    font-size: 16px; /* 防止iOS缩放 */
  }

  .filter-select {
    font-size: 16px;
  }

  /* 移动端表格优化 */
  .table-container {
    border-radius: 6px;
    overflow-x: auto;
  }

  .data-table {
    min-width: 600px; /* 确保表格可以横向滚动 */
  }

  .data-table th,
  .data-table td {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .data-table th:nth-child(4),
  .data-table td:nth-child(4),
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    display: none; /* 隐藏联系电话和地址列 */
  }

  .action-buttons {
    gap: 4px;
  }

  .btn-icon-btn {
    padding: 4px;
    font-size: 12px;
  }

  /* 模态框优化 */


  .modal-header h3 {
    font-size: 16px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-group label {
    font-size: 13px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 16px;
  }


  .modal-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .customer-management {
    padding: 8px;
  }

  .page-header h2 {
    font-size: 18px;
  }


  .search-section {
    gap: 8px;
  }

  .search-input,
  .filter-select {
    padding: 8px 12px;
    font-size: 14px;
  }

  .search-btn {
    padding: 8px 12px;
  }

  .data-table th,
  .data-table td {
    padding: 6px 8px;
    font-size: 12px;
  }

  .data-table th:nth-child(3),
  .data-table td:nth-child(3) {
    display: none; /* 隐藏身份证号列 */
  }


  .action-buttons {
    gap: 2px;
  }

  .btn-icon-btn {
    padding: 3px;
    font-size: 10px;
  }


  .modal-header h3 {
    font-size: 14px;
  }


  .form-group label {
    font-size: 12px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 12px;
    font-size: 14px;
  }

  .customer-info p {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .page-header h2 {
    font-size: 16px;
  }




  .data-table th,
  .data-table td {
    padding: 4px 6px;
    font-size: 11px;
  }

  .data-table th:nth-child(2),
  .data-table td:nth-child(2) {
    display: none; /* 隐藏客户姓名列 */
  }

  .modal-header h3 {
    font-size: 13px;
  }



  .form-group label {
    font-size: 11px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 500px) {
  .modal {
    max-height: 85vh;
  }


  .modal-actions .btn {
    width: auto;
  }
}

/* 大屏幕优化 */
@media (min-width: 1200px) {
  .customer-management {
    padding: 24px;
  }

  .page-header h2 {
    font-size: 28px;
  }

  .search-section {
    gap: 20px;
  }

  .search-box {
    max-width: 500px;
  }

  .data-table th,
  .data-table td {
    padding: 16px 20px;
    font-size: 15px;
  }



  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 14px 16px;
    font-size: 16px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .customer-management {
    background: #111827;
  }

  .page-header h2 {
    color: #f9fafb;
  }

  .table-container {
    background: #1f2937;
  }

  .data-table th {
    background: #374151;
    color: #d1d5db;
  }

  .data-table td {
    color: #f9fafb;
    border-bottom-color: #374151;
  }

  .search-input,
  .filter-select {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .search-input:focus,
  .filter-select:focus {
    border-color: #3b82f6;
  }



  .modal-header h3 {
    color: #f9fafb;
  }

  .form-group label {
    color: #d1d5db;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: #3b82f6;
  }



  .customer-info p {
    color: #d1d5db;
  }

  .btn-primary {
    background: #3b82f6;
  }

  .btn-primary:hover {
    background: #2563eb;
  }

  .btn-secondary {
    background: #6b7280;
  }

  .btn-secondary:hover {
    background: #4b5563;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-icon-btn,
  .form-group input,
  .form-group select,
  .form-group textarea {
    transition: none;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {


  .btn-primary {
    background: #1d4ed8;
    border: 2px solid #1d4ed8;
  }

  .btn-secondary {
    background: #4b5563;
    border: 2px solid #4b5563;
  }
}
/* 全局样式 */
.customer-management {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  background-color: #f9fafb;
  min-height: 100vh;
}

/* 搜索和筛选 */
.search-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-box {
  position: relative;
  flex-grow: 1;
}

.search-input {
  width: 100%;
  padding: 10px 40px 10px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: #2563eb;
  outline: none;
}

.search-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #2563eb;
  font-size: 18px;
  cursor: pointer;
}

.filter-options .filter-select {
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.filter-select:focus {
  border-color: #2563eb;
  outline: none;
}

/* 客户表格 */
.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.data-table th {
  background-color: #f3f4f6;
  font-weight: 600;
  color: #1f2937;
}

.data-table tr:hover {
  background-color: #f0f9ff;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-icon-btn {
  padding: 8px;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-btn {
  color: #2563eb;
}

.edit-btn:hover {
  background-color: #e0f2fe;
}

.delete-btn {
  color: #ef4444;
}

.delete-btn:hover {
  background-color: #fee2e2;
}

/* 编辑表单模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-modal {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.edit-modal h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: #2563eb;
  outline: none;
}

.form-actions {
  display: flex;
  justify-content: space-between;
}

.btn-primary {
  background: #2563eb;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-secondary {
  background: #6b7280;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-secondary:hover {
  background: #525a66;
}
/* 删除确认弹窗 */
.delete-modal {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.delete-modal h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.delete-modal p {
  margin-bottom: 24px;
  color: #374151;
}

.btn-danger {
  background: #ef4444;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-danger:hover {
  background: #dc2626;
}
/* 功能按钮栏 */
.action-buttons-bar {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
}

/* 添加客户弹窗 */
.add-modal {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.add-modal h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

</style>